<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生在线考试系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="my/style.css">
    <!-- vue2 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body class="d-flex vh-100 overflow-hidden">
<div class="d-flex flex-column flex-grow-1" id="all">
    <topmessage v-bind:now_time="date_time" v-bind:user="user" ></topmessage>
    <div class="d-flex">
        <div class="d-flex justify-content-center" style="width: 200px">
        <span class="fs-5 align-self-center" data-bs-toggle="collapse" data-bs-target="#main-list"
              aria-expanded="false">菜单</span>
        </div>
    </div>
    <div class="d-flex flex-grow-1 overflow-auto" id="menu-and-interface">
        <div class="border collapse" id="main-list" style="width: 200px;min-width: 200px">
            <tabs></tabs>
        </div>
        <div id="main" class="bg-light flex-grow-1 p-2 overflow-auto">

            <students v-bind:all_data="List" v-if="currentTab.listName==='学生列表'"></students>
            <teachers v-bind:all_data="List" v-if="currentTab.listName==='教师列表'"></teachers>
            <admins v-bind:all_data="List" v-if="currentTab.listName==='管理员列表'"></admins>

            <testexam v-bind:all_data="List" v-if="currentTab.listName==='试卷列表'"></testexam>
            <testexamcreation v-bind:all_data="List" v-if="currentTab.listName==='试卷创编'"></testexamcreation>
            <questionbanklist v-bind:all_data="List" v-if="currentTab.listName==='题目列表'"></questionbanklist>
            <topiccreation v-bind:all_data="List" v-if="currentTab.listName==='题目创编'"></topiccreation>
            <studentinfo v-bind:all_data="List" v-if="currentTab.listName==='账户信息'"></studentinfo>
            <changepassword v-bind:all_data="List" v-if="currentTab.listName==='修改密码'"></changepassword>
<!--            <component v-bind:is="currentTab.component" :all_student="studentList"></component>-->

            <!--在此处添加div-->

            <!--            教师考卷成绩查看-->
            <!--            教师二级界面  通过教师考卷列表进入*****************-->
<!--            <finishedexam></finishedexam>-->

            <!--            教师考卷详情查看，学生通用-->
            <!--            教师三级界面 通过教师考卷成绩查看进入 学生二级界面 通过学生考卷列表进入-->
<!--            <examdetail></examdetail>-->

            <!--            教师题库列表，通用于试卷添加题目（二级）-->
            <!--            教师二级界面 通过教师试卷创编进入-->
            <!--            <questionbanklist></questionbanklist>-->
            <!--            学生做题界面 二级界面 任务列表进入-->
<!--            <studentstartquestion></studentstartquestion>-->
        </div>
    </div>
</div>

<script type="application/javascript">

    // 用户类型，通过cookie传值进来（login.html进入该界面时）
    let usermsg = {"id": 1,"username": "zyj","password":"123456"};
    let userType = "admin";
    // JSON.stringify 将js对象转换成JSON对象（该界面取出cookie里的值）
    document.cookie = "userType=" + userType +";usermsg="+ JSON.stringify(usermsg);
    console.log(document.cookie);

    // 获取用户信息
    // let userType2 = document.cookie.split(";")[0].split("=")[1];
    // let usermsg2 = document.cookie.split(";")[1].split("=")[1];
    // // JSON.parse 将JSON对象转换成js对象
    // let obj = JSON.parse(usermsg2)
    // console.log(userType2)
    // console.log(usermsg2)
    // let userType = "teacher";

    // 将菜单栏所有选项做成一个动态组件，可以随时添加修改其中的元素
    let tabListArrayForAll = [
        {
            authority: "管理员",
            tabListArray: [
                {
                    tabId: "lm1",
                    tabName: "用户管理",
                    tabs: [
                        {
                            listName: "学生列表",
                            listUser: "student",
                            component: {
                                template: `<students></students>`
                            }
                        },
                        {
                            listName: "教师列表",
                            listUser: "teacher",
                            component: {
                                template: "<teachers></teachers>"
                            }
                        },
                        {
                            listName: "管理员列表",
                            listUser: "admin",
                            component: {
                                template: "<admins></admins>"
                            }
                        }
                    ]
                },
                {
                    tabId: "lm2",
                    tabName: "卷库管理",
                    tabs: [
                        {
                            listName: "试卷列表",
                            listUser: "exampaper",
                            component: {
                                // template: "<h1>试卷创编</h1>"
                                template: "<testexam></testexam>"
                            }
                        },
                        {
                            listName: "试卷创编",
                            component: {
                                template: "<testexamcreation></testexamcreation>"
                            }
                        }
                    ]
                },
                {
                    tabId: "lm3",
                    tabName: "题库管理",
                    tabs: [
                        {
                            listName: "题目列表",
                            listUser: "question",
                            component: {
                                template: "<questionbanklist></questionbanklist>"
                            }
                        },
                        {
                            listName: "题目创编",
                            component: {
                                template: "<topiccreation></topiccreation>"
                            }
                        }
                    ]
                },
                {
                    tabId: "lm4",
                    tabName: "个人中心",
                    tabs: [
                        {
                            listName: "账户信息",
                            component: {
                                template: "<studentinfo></studentinfo>"
                            }
                        },
                        {
                            listName: "修改密码",
                            component: {
                                template: "<changepassword></changepassword>"
                            }
                        }
                    ]
                }
            ],
        },
        {
            authority: "教师",
            tabListArray: [
                {
                    tabId: "tlm1",
                    tabName: "主页",
                    tabs: []
                },
                {
                    tabId: "tlm2",
                    tabName: "考卷批改",
                    tabs: [
                        {
                            listName: "待批改",
                            component: {
                                template: "<teacherexam></teacherexam>"
                            }
                        },
                        {
                            listName: "已批改",
                            component: {
                                template: "<teacherexam></teacherexam>"
                            }
                        }
                    ]
                },
                {
                    tabId: "tlm3",
                    tabName: "卷库管理",
                    tabs: [
                        {
                            listName: "我的试卷",
                            component: {
                                template: "<testexam></testexam>"
                            }
                        },
                        {
                            listName: "试卷创编",
                            component: {
                                template: "<testexamcreation></testexamcreation>"
                            }
                        }
                    ]
                },
                {
                    tabId: "tlm4",
                    tabName: "班级管理",
                    tabs: [
                        {
                            listName: "我的班级",
                            component: {
                                template: "<classlist></classlist>"
                            }
                        },
                        {
                            listName: "创建班级",
                            component: {
                                template: "<createclass></createclass>"
                            }
                        },
                        {
                            listName: "我的学生",
                            component: {
                                template: "<h1>我的学生</h1>"
                            }
                        }
                    ]
                },
                {
                    tabId: "tlm5",
                    tabName: "个人中心",
                    tabs: [
                        {
                            listName: "教师信息",
                            component: {
                                template: "<teacherinfo></teacherinfo>"
                            }
                        },
                        {
                            listName: "修改密码",
                            component: {
                                template: "<changepassword></changepassword>"
                            }
                        }
                    ]
                }
            ],
        },
        {
            authority: "学生",
            tabListArray: [
                {
                    tabId: "slm1",
                    tabName: "主页",
                    tabs: []
                },
                {
                    tabId: "slm2",
                    tabName: "任务",
                    tabs: [
                        {
                            listName: "任务中心",
                            component: {
                                template: "<studenttask></studenttask>"
                            }
                        }
                    ]
                },
                {
                    tabId: "slm3",
                    tabName: "我的试卷",
                    tabs: [
                        {
                            listName: "学生考卷列表",
                            component: {
                                template: "<studentpagelist></studentpagelist>"
                            }
                        }
                    ]
                },
                {
                    tabId: "slm4",
                    tabName: "班级管理",
                    tabs: [
                        {
                            listName: "我的班级",
                            component: {
                                template: "<classlist></classlist>"
                            }
                        },
                        {
                            listName: "加入班级",
                            component: {
                                template: "<studententerclass></studententerclass>"
                            }
                        }
                    ]
                }
            ],
        }
    ]
    // 展示相关数据，如 管理员只能看到管理员的界面，教师看教师界面，学生看学生界面
    let tabLists = {};
    if(userType === "admin"){
        tabLists = tabListArrayForAll[0];
    }else if (userType === "teacher"){
        tabLists = tabListArrayForAll[1];
    }else{
        tabLists = tabListArrayForAll[2];
    }
    // 最上层信息组件
    Vue.component("topmessage",{
        props: {
            now_time: {},
            user: {}
        },
        data: function () {
            return {
                tabLists: tabLists,
                app
            }
        },
        template: `
        <nav class="navbar navbar-expand navbar-dark bg-dark bg-gradient">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">学生在线考试系统</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item nav-link">
                        {{tabLists.authority}}端
                    </li>
                    <li class="nav-item nav-link">
                        {{now_time.getFullYear()}}年
                        {{now_time.getMonth()}}月
                        {{now_time.getDate()}}日
                    </li>
                    <li class="nav-item nav-link">
                        {{now_time.getHours()}}:
                        {{now_time.getMinutes()}}:
                        {{now_time.getSeconds()}}
                    </li>
                </ul>
                <div class="navbar-text">
                    当前用户：{{ user.name }}
                </div>
                <div class="navbar-text">
                    <a class="nav-link" href="login.html">注销</a>
                </div>
            </div>
        </div>
    </nav>
        `
    })
    // 菜单组件
    Vue.component("tabs", {
        props: {
            tab_message: {} // 传入用户类型信息
        },
        data: function () {
            return {
                tabLists: tabLists,
                app
            }
        },
        template: `
          <div>
            <div v-bind:id="tabLists.authority+'-menu-list'">
              <div class="accordion-item" v-for="tabList in tabLists.tabListArray">
                <h3 class="accordion-header">
                  <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                       v-bind:data-bs-target="'#'+tabList.tabId">
                    {{ tabList.tabName }}
                  </div>
                </h3>
                <div v-bind:id="tabList.tabId" class="accordion-collapse collapse ">
                  <div class="accordion-body"
                       v-for="tab in tabList.tabs"
                       v-on:click="passTabToApp(tab)"
                  >
                    {{ tab.listName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        `,
        methods: {
            passTabToApp: function (tab) {
                app.$data.currentTab = tab;
                if (tab.listUser != undefined){
                    this.$parent.getList(tab.listUser)
                }
            }
        }
    });
    //--------管理员所用的组件-----------------
    // a1.1 学生列表
    Vue.component("students", {
        props: {
            all_data: {} // 传入用户数据
        },
        data: function () {
            return {
                s_id: ""
            }
        },
        template: `
          <div class="container-fluid">
          <form class="row justify-content-center">
            <div class="col-5">
              <label for="inputSearch" class="visually-hidden">查找学生：</label>
              <input type="password" class="form-control" id="inputSearch" placeholder="学号" v-model="s_id">
            </div>
            <div class="col-auto">
              <div type="submit" class="btn btn-primary mb-3" v-on:click="getOneStudent(s_id)">查找</div>
              <a class="btn btn-success mb-3 col-auto">新增学生</a>
            </div>
          </form>
          <table class="table">
            <thead>
            <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>性别</th>
              <th>联系方式</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="student in all_data">
              <td>{{ student.id_student }}</td>
              <td>{{ student.name }}</td>
              <td>{{ student.sex }}</td>
              <td>{{ student.email }}</td>
              <td v-if="student.status == 0">禁用</td>
              <td v-else>启用</td>
              <td><span>启用</span> <span>禁用</span></td>
            </tr>
            </tbody>
          </table>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
          </div>
        `,
        methods: {
            getOneStudent: async function(id){
                await this.$parent.getOne("student",id);

            }
        }
    });
    // a1.2 教师列表
    Vue.component("teachers", {
        props: {
            all_data: {} // 传入用户类型信息
        },
        data: function () {
            return {
                s_id: ""
            }
        },
        template: `
          <div class="container-fluid">
          <form class="row justify-content-center">
            <div class="col-5">
              <label for="inputSearch2" class="visually-hidden">查找教师：</label>
              <input type="password" class="form-control" id="inputSearch2" placeholder="教师编号" v-model="s_id">
            </div>
            <div class="col-auto">
              <div type="submit" class="btn btn-primary mb-3" v-on:click="getOneTeacher(s_id)">查找</div>
              <a class="btn btn-success mb-3 col-auto">新增教师</a>
            </div>
          </form>
          <table class="table">
            <thead>
            <tr>
              <th>
                ID
              </th>
              <th>
                姓名
              </th>
              <th>
                性别
              </th>
              <th>
                年龄
              </th>
              <th>
                职位
              </th>
              <th>
                操作
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="teacher in all_data">
              <td>{{teacher.id_teacher}}</td>
              <td>{{teacher.name}}</td>
              <td>{{ teacher.sex }}</td>
              <td>{{teacher.age}}</td>
              <td>{{teacher.occupation}}</td>
              <td ><span>启用</span> <span>禁用</span></td>
            </tr>
            </tbody>
          </table>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>

          </div>
        `,
        methods: {
            getOneTeacher: async function(id){
                await this.$parent.getOne("teacher",id);

            }
        }
    });
    // a1.3 管理员列表
    Vue.component("admins", {
        props: {
            all_data: {} // 传入用户数据
        },
        data: function () {
            return {
                s_id: ""
            }
        },
        template: `
          <div class="container-fluid">
          <form class="row justify-content-center">
            <div class="col-5">
              <label for="inputSearch3" class="visually-hidden">查找教师：</label>
              <input type="password" class="form-control" id="inputSearch3" placeholder="管理员姓名" v-model="s_id">
            </div>
            <div class="col-auto">
              <div class="btn btn-primary mb-3" v-on:click="getOneAdmin(s_id)">查找</div>
            </div>
          </form>
          <table class="table">
            <thead>
            <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>性别</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="admin in all_data">
              <td>{{admin.id_admin}}</td>
              <td>{{admin.name}}</td>
              <td>{{ admin.sex }}</td>
              <td ><div v-on:click="deleteMethod('admin',admin.id_admin)">删除</div></td>
            </tr>
            </tbody>
          </table>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
          </div>
        `,
        methods: {
            deleteMethod: async function(user,id){
                await this.$parent.deleteOne(user, id);
            },
            getOneAdmin: async function(id){
                await this.$parent.getOne("admin",id);

            }
        }
    });
    // a2.1 t2.1 教师试卷列表查看（管理员、教师通用）
    Vue.component("testexam", {
        props: {
            all_data: {} // 传入用户类型信息
        },
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <table class="table">
            <thead>
            <tr>
              <th>
                ID
              </th>
              <th>
                名称
              </th>
              <th>
                班级
              </th>
              <th>
                创建时间
              </th>

              <th>
                操作
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="exampaper in all_data">
              <td>{{exampaper.id_paper}}</td>
              <td>{{exampaper.paper_name}}</td>
              <td>{{ exampaper.id_class }}</td>
              <td>{{exampaper.create_time}}</td>
              <td ><a class="link-dark text-decoration-none">
                编辑
              </a></td>
            </tr>
            </tbody>
          </table>
          </div>                     `
    });
    // a2.2 t2.2 教师试卷创编(管理员教师通用)
    Vue.component("testexamcreation", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <form class="row g-3">
            <div class="col-12">
              <label for="inputAddress" class="form-label">试卷名</label>
              <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
            </div>
            <div class="col-md-4">
              <label for="inputState" class="form-label">试卷类型</label>
              <select id="inputState" class="form-select">
                <option selected>限时任务试卷（学生在时间段内考试）</option>
                <option>定时任务试卷（学生定时考试）</option>
                <option>普通任务试卷（学生在截止时间前完成考试）</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">所属班级</label>
              <select class="form-select">
                <option selected>...</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">开始日期</label>
              <input type="date" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">时间</label>
              <input type="time" class="form-control">
            </div>

            <div class="col-md-6">
              <label class="form-label">结束日期</label>
              <input type="date" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">时间</label>
              <input type="time" class="form-control">
            </div>


            <div class="col-12">
              <label for="inputAddress2" class="form-label">建议时间</label>
              <input type="text" class="form-control" id="inputAddress2"
                     placeholder="Apartment, studio, or floor">
            </div>
            <div class="col-12">
              <div class="form-check">
                <a class="btn bg-info">添加考题</a><span>共 <span>0</span> 道题。</span>
              </div>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">保存</button>
              <button type="submit" class="btn btn-primary">保存为新试卷</button>
              <button type="reset" class="btn btn-secondary">重置</button>

            </div>
          </form>
          </div>        `
    });
    // a3.1 教师题库列表，通用于试卷添加题目（教师管理员通用）
    Vue.component("questionbanklist", {
        props: {
            all_data: {} // 传入用户类型信息
        },
        data: function () {
            return {
                a: "",
                b: "",
                c: "",
                d: ""
            }
        },
        template: `
          <div class="container-fluid">
          <table class="table table-borderless">
            <tr v-for="question in all_data">
              <td class="fw-bold">
                {{ question.id_question }}
              </td>
              <td>
                <p>{{question.question_face}}</p>
                <div class="row">
                  <p class="col">
                    <span>A.</span>
                    {{a}}
                  </p>
                  <p class="col">
                    <span>B.</span>
                    {{b}}    </p>
                  <p class="col">
                    <span>C.</span>
                    {{c}}
                  </p>
                  <p class="col">
                    <span>D.</span>
                    {{ d }}
                  </p>
                </div>
              </td>
              <td>
                <a class="link-dark text-decoration-none">编辑</a>
                <a class="link-danger text-decoration-none">删除</a>
                <a class="link-dark text-decoration-none">添加此题</a>
              </td>
            </tr>
          </table>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
          </div>                        `,
        mounted(){
            this.a = Math.floor(Math.random() * 10);
            this.b = Math.floor(Math.random() *10 );
            this.c = Math.floor(Math.random() *10);
            this.d = Math.floor(Math.random() *10);
        }
    });
    // a3.2 教师题目创编，编辑题目通用(教师管理员通用)
    Vue.component("topiccreation", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <form class="row g-3">
            <div class="col-12">
              <label class="form-label">题面</label>
              <textarea class="form-control" rows="5"></textarea>
            </div>
            <div class="col-md-6">
              <label class="form-label">题目类型</label>
              <select class="form-select">
                <option selected>单选题</option>
                <option>多选题</option>
                <option>判断题</option>
                <option>填空题</option>
                <option>简答题</option>
              </select>
              <button class="btn btn-secondary">添加选项</button>
            </div>

            <div class="row">
              <div class="col-md-2">
                <label class="form-label">选项</label>
                <input type="text" class="form-control" placeholder="ABC。。">
              </div>


              <div class="col-md-6">
                <label class="form-label">选项内容</label>
                <input type="text" class="form-control" placeholder="1234 Main St">
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label">设置答案</label>
              <input type="text" class="form-control" placeholder="1234 Main St">
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">保存</button>
              <button type="submit" class="btn btn-primary">保存为新题目</button>
              <button type="reset" class="btn btn-secondary">重置</button>

            </div>
          </form>

          </div>
        `
    });
    // a4.1 学生信息修改,学生管理员通用
    Vue.component("studentinfo", {
        data: function () {
            return {}
        },
        template: `
          <form class="container-fluid form-student-info">
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputName">姓名：</label>
            <input id="inputName" type="text" class="col-7" v-model="$parent.user.name"/>
          </div>
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputSex">性别：</label>
            <input id="inputSex" type="text" class="col-7" v-model="$parent.user.sex"/>
          </div>
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputPwd">密码：</label>
            <input id="inputPwd" type="text" class="col-7" v-model="$parent.user.password"/>
          </div>
          <div class="row justify-content-center" v-if="$parent.user_type !== 'admin'">
            <label class="col-2 col-form-label" for="inputPhone">手机：</label>
            <input id="inputPhone" type="text" class="col-7" v-model="$parent.user.phone"/>
          </div>
          <div class="row justify-content-center" v-if="$parent.user_type !== 'admin'">
            <label class="col-2 col-form-label" for="inputEmail">电子邮箱：</label>
            <input id="inputEmail" type="text" class="col-7" v-model="$parent.user.email"/>
          </div>
          <div class="row justify-content-center">
            <div class="col-5"></div>
            <input type="submit" class="btn btn-primary col-auto" value="提交" v-on:click="updateAdmin()"/>
          </div>
          </form>
        `,
        methods: {
            updateAdmin: async function(){
                await this.$parent.updateAdmin();
            }
        }
    });
    // a4.2 t4.2 密码修改，学生教师管理员通用
    Vue.component("changepassword", {
        data: function () {
            return {}
        },
        template: `
          <form class="container-fluid form-student-info">
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputPwd0">原密码</label>
            <input id="inputPwd0" type="text" class="col-7"/>
          </div>
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputPwd01">新密码：</label>
            <input id="inputPwd01" type="text" class="col-7"/>
          </div>
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputPwd02">确认新密码:</label>
            <input id="inputPwd02" type="text" class="col-7"/>
          </div>
          <div class="row justify-content-center">
            <div class="col-5"></div>
            <input type="submit" class="btn btn-primary col-auto" value="提交"/>
          </div>
          </form>        `
    });
    //---------教师所用组件--------------------
    // t1.1 t1.2 教师考卷列表(待批改、已批改)
    Vue.component("teacherexam", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <form class="row justify-content-center">
            <div class="col-5">
              <label for="inputSearch4" class="visually-hidden">查找试卷</label>
              <input type="password" class="form-control" id="inputSearch4" placeholder="查找班级或纸卷名称">
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-3">查找</button>
            </div>
          </form>

          <div class="row justify-content-center">
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  软件工程Java一班
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">应做35人</p>
                  <p class="card-text">已做30人</p>
                </div>
                <div class="card-footer text-muted text-end">
                  <a href="#" class="btn">自动批改</a>
                  <a href="#" class="btn">查看成绩</a>
                </div>
              </div>

            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  软件工程Java一班
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">应做35人</p>
                  <p class="card-text">已做30人</p>
                </div>
                <div class="card-footer text-muted text-end">
                  <a href="#" class="btn">自动批改</a>
                  <a href="#" class="btn">查看成绩</a>
                </div>
              </div>

            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  软件工程Java一班
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">应做35人</p>
                  <p class="card-text">已做30人</p>
                </div>
                <div class="card-footer text-muted text-end">
                  <a href="#" class="btn">自动批改</a>
                  <a href="#" class="btn">查看成绩</a>
                </div>
              </div>

            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  软件工程Java一班
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">应做35人</p>
                  <p class="card-text">已做30人</p>
                </div>
                <div class="card-footer text-muted text-end">
                  <a href="#" class="btn">自动批改</a>
                  <a href="#" class="btn">查看成绩</a>
                </div>
              </div>

            </div>

          </div>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
          </div>                        `
    });
    // t3.1 教师班级列表，学生通用
    Vue.component("classlist", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <table class="table">
            <thead>
            <tr>
              <th>
                ID
              </th>
              <th>
                班级名称
              </th>
              <th>
                班级代码
              </th>
              <th>
                操作
              </th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                1
              </td>
              <td>
                形势与政策一班
              </td>
              <td>
                12345
              </td>
              <td>
                <a class="link-dark text-decoration-none">
                  编辑
                </a>
                <a class="link-danger text-decoration-none">
                  删除
                </a>
                <a class="link-danger text-decoration-none">
                  退出班级
                </a>
              </td>
            </tr>
            </tbody>
          </table>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>

          </div>                        `
    });
    // t3.2 教师创编班级
    Vue.component("createclass", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <form class="row g-3">
            <div class="col-md-12">
              <label for="formGroupExampleInput" class="form-label">班级名称</label>
              <input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
            </div>
            <div class="col-md-12">
              <label for="formGroupExampleInput2" class="form-label">班级代码</label>
              <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="">
            </div>


            <div class="col-12">
              <button type="submit" class="btn btn-primary">保存</button>
              <button type="submit" class="btn btn-primary">保存为新班级</button>
              <button type="reset" class="btn btn-secondary">重置</button>
            </div>
          </form>
          </div>        `
    });
    // t4.1 教师信息修改
    Vue.component("teacherinfo", {
        data: function () {
            return {}
        },
        template: `
          <form class="container-fluid form-student-info">
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputName1">教师姓名：</label>
            <input id="inputName1" type="text" class="col-7"/>
          </div>
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputSex1">性别：</label>
            <input id="inputSex1" type="text" class="col-7"/>
          </div>
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputPwd1">密码：</label>
            <input id="inputPwd1" type="text" class="col-7"/>
          </div>
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputPhone1">职位</label>
            <input id="inputPhone1" type="text" class="col-7"/>
          </div>
          <div class="row justify-content-center">
            <label class="col-2 col-form-label" for="inputEmail1">年龄</label>
            <input id="inputEmail1" type="text" class="col-7"/>
          </div>
          <div class="row justify-content-center">
            <div class="col-5"></div>
            <input type="reset" class="btn col-auto" value="重置"/>
            <input type="submit" class="btn btn-primary col-auto" value="提交"/>
          </div>
          </form>
        `
    });
    //教师考卷列表查看
    Vue.component("finishedexam", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <form class="row justify-content-center">
            <div class="col-5">
              <label for="inputSearch5" class="visually-hidden">查找学生：</label>
              <input type="password" class="form-control" id="inputSearch5" placeholder="姓名学号或联系方式">
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-3">查找</button>
              <a class="btn btn-success mb-3 col-auto">新增学生</a>
            </div>
          </form>

          <table class="table">
            <thead>
            <tr>
              <th>
                姓名
              </th>
              <th>
                得分
              </th>
              <th>
                概要
              </th>
              <th>
                耗时
              </th>
              <th>
                提交时间
              </th>
              <th>
                操作
              </th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>
                Tom
              </td>
              <td>
                70
              </td>
              <td>
                7/10
              </td>
              <td>
                20
              </td>
              <td>
                2018/9/2
              </td>
              <td>
                <a class="link-dark text-decoration-none">
                  查看做题详情
                </a>
              </td>
            </tr>
            </tbody>
          </table>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>

          </div>                        `
    });
    //教师考卷详情查看，学生通用
    Vue.component("examdetail", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <table class="table table-borderless">
            <tr>
              <td class="fw-bold">
                1.
              </td>
              <td>
                <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                <div class="row">
                  <p class="col">
                    <span>A.</span>
                    新型城镇化、信息化、工业化、农业现代化化</p>
                  <p class="col">
                    <span>B.</span>
                    新型城市化、现代化、信息化、工业化</p>
                  <p class="col">
                    <span>C.</span>
                    新型工业化、农业现代化、信息化、城镇化</p>
                  <p class="col">
                    <span>D.</span>
                    新型工业化、信息化、城镇化、农业现代化</p>
                </div>
                <p>正确答案：<span>D</span></p>
                <p>学生答案：<span>D</span></p>
                <p>得分：<span>3</span></p>
              </td>
            </tr>
            <tr>
              <td class="fw-bold">
                1.
              </td>
              <td>
                <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                <div class="row">
                  <p class="col">
                    <span>A.</span>
                    新型城镇化、信息化、工业化、农业现代化化</p>
                  <p class="col">
                    <span>B.</span>
                    新型城市化、现代化、信息化、工业化</p>
                  <p class="col">
                    <span>C.</span>
                    新型工业化、农业现代化、信息化、城镇化</p>
                  <p class="col">
                    <span>D.</span>
                    新型工业化、信息化、城镇化、农业现代化</p>
                </div>
                <p>正确答案：<span>D</span></p>
                <p>学生答案：<span>D</span></p>
                <p>得分：<span>3</span></p>
              </td>
            </tr>
            <tr>
              <td class="fw-bold">
                1.
              </td>
              <td>
                <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                <div class="row">
                  <p class="col">
                    <span>A.</span>
                    新型城镇化、信息化、工业化、农业现代化化</p>
                  <p class="col">
                    <span>B.</span>
                    新型城市化、现代化、信息化、工业化</p>
                  <p class="col">
                    <span>C.</span>
                    新型工业化、农业现代化、信息化、城镇化</p>
                  <p class="col">
                    <span>D.</span>
                    新型工业化、信息化、城镇化、农业现代化</p>
                </div>
                <p>正确答案：<span>D</span></p>
                <p>学生答案：<span>D</span></p>
                <p>得分：<span>3</span></p>
              </td>
            </tr>
            <tr>
              <td class="fw-bold">
                1.
              </td>
              <td>
                <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                <div class="row">
                  <p class="col">
                    <span>A.</span>
                    新型城镇化、信息化、工业化、农业现代化化</p>
                  <p class="col">
                    <span>B.</span>
                    新型城市化、现代化、信息化、工业化</p>
                  <p class="col">
                    <span>C.</span>
                    新型工业化、农业现代化、信息化、城镇化</p>
                  <p class="col">
                    <span>D.</span>
                    新型工业化、信息化、城镇化、农业现代化</p>
                </div>
                <p>正确答案：<span>D</span></p>
                <p>学生答案：<span>D</span></p>
                <p>得分：<span>3</span></p>
              </td>
            </tr>
            <tr>
              <td class="fw-bold">
                1.
              </td>
              <td>
                <p>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
                <div class="row">
                  <p class="col">
                    <span>A.</span>
                    新型城镇化、信息化、工业化、农业现代化化</p>
                  <p class="col">
                    <span>B.</span>
                    新型城市化、现代化、信息化、工业化</p>
                  <p class="col">
                    <span>C.</span>
                    新型工业化、农业现代化、信息化、城镇化</p>
                  <p class="col">
                    <span>D.</span>
                    新型工业化、信息化、城镇化、农业现代化</p>
                </div>
                <p>正确答案：<span>D</span></p>
                <p>学生答案：<span>D</span></p>
                <p>得分：<span>3</span></p>
              </td>
            </tr>
          </table>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>

          </div>
        `
    });

    //----------end教师所用组件-----------------
    // s1.1 学生任务列表
    Vue.component("studenttask", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <div class="row g-3">
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">开始时间</p>
                  <p class="card-text">截止时间</p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">现在做</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">开始时间</p>
                  <p class="card-text">截止时间</p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">现在做</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">开始时间</p>
                  <p class="card-text">截止时间</p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">现在做</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">开始时间</p>
                  <p class="card-text">截止时间</p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">现在做</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">开始时间</p>
                  <p class="card-text">截止时间</p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">现在做</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">开始时间</p>
                  <p class="card-text">截止时间</p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">现在做</a>
                </div>
              </div>
            </div>
          </div>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
          </div>                        `
    });
    //学生做题界面
    Vue.component("studentstartquestion", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <div class="row justify-content-end">
            <a class="col-2 btn-secondary btn ">交卷</a>
          </div>
          <form class="row g-3">
            <div class="row g-3">
              <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group" role="group" aria-label="First group">
                  <button type="button" class="btn btn-outline-secondary">1</button>
                  <button type="button" class="btn btn-outline-secondary">2</button>
                  <button type="button" class="btn btn-outline-secondary">3</button>
                  <button type="button" class="btn btn-outline-secondary">4</button>
                  <button type="button" class="btn btn-outline-secondary">1</button>
                  <button type="button" class="btn btn-outline-secondary">2</button>
                  <button type="button" class="btn btn-outline-secondary">3</button>
                  <button type="button" class="btn btn-outline-secondary">4</button>
                </div>

              </div>
            </div>
            <p><span>1. </span>《建议》从九个方面勾画了2035年基本实现社会主义现代化远景目标，其中提到基本实现（ ），建成现代化经济体系。</p>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                A
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="">
              <label class="form-check-label" for="flexCheckDefault">
                B
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="">
              <label class="form-check-label" for="flexCheckDefault">
                C
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="">
              <label class="form-check-label" for="flexCheckDefault">
                D
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="flexRadioDefault">
              <label class="form-check-label" for="flexRadioDefault1">
                A
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="flexRadioDefault">
              <label class="form-check-label" for="flexRadioDefault1">
                B
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="flexRadioDefault">
              <label class="form-check-label" for="flexRadioDefault1">
                C
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
              <label class="form-check-label" for="flexRadioDefault1">
                D
              </label>
            </div>
            <div class="col-12">
              <textarea class="form-control" rows="5"></textarea>
            </div>
            <nav>
              <ul class="pagination justify-content-end">
                <li class="page-item disabled">
                  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一题</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#">下一题</a>
                </li>
              </ul>
            </nav>
          </form>
          </div>
        `
    });
    // s2.1 学生考卷列表
    Vue.component("studentpagelist", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid">
          <div class="row g-3">
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">得分<span>80</span></p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">查看详情</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">得分<span>80</span></p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">查看详情</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">得分<span>80</span></p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">查看详情</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">得分<span>80</span></p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">查看详情</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">得分<span>80</span></p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">查看详情</a>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-header">
                  限时考试
                </div>
                <div class="card-body">
                  <h5 class="card-title">软件工程章测试</h5>
                  <p class="card-text">时间 60分钟</p>
                  <p class="card-text">得分<span>80</span></p>
                </div>
                <div class="card-footer text-right">
                  <a href="#" class="btn btn-primary">查看详情</a>
                </div>
              </div>
            </div>
          </div>
          <nav>
            <ul class="pagination justify-content-end">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
          </div>
        `
    });
    // s3.2 学生加入班级
    Vue.component("studententerclass", {
        data: function () {
            return {}
        },
        template: `
          <div class="container-fluid d-flex flex-column ">
          <form class="row justify-content-center">
            <div class="col-md-7">
              <label for="formGroupExampleInput" class="form-label">班级代码:</label>
              <input type="text" class="form-control mb-3" placeholder="">
              <button type="submit" class="btn btn-primary">加入</button>
            </div>
          </form>
          </div>
        `
    });

    var app = new Vue({
        el: "#all",
        data: {
            tabListArrayForAll: tabListArrayForAll,
            currentTab: {},
            menu_visible: true,
            user_type: userType,
            usermsg: usermsg,
            date_time: new Date(),
            user: {
            }, //当前用户信息 通过getAdmin方法获取
            List: [], //各种列表
            list2: [], //管理员查看所有列表的第二个列表，即
            list3:[]    //
        },
        async mounted() {
            axios.get("http://192.168.31.198/admin-provider/admin/99",{
            }).then(response=>this.user=response.data);
        },
        methods: {
            getAdmin: async function (id) {
                axios.get("http://192.168.31.198/admin-provider/admin/"+id,{
                }).then(response=>{
                    this.user=response.data;
                    console.log(response);
                });
            },
            getList: async function(user){
                // 方式一
                // axios.get("http://192.168.31.198/admin-provider/"+ user)
                //     .then(response =>{
                //         this.List = response.data;
                //         // console.log(this.List)
                //         // console.log(this.List[0])
                //     });

                // 方式二
                axios({
                    method: 'get',
                    url: "http://192.168.31.198/admin-provider/" + user,
                }).then(response => {
                    this.List = response.data;
                })
            },
            deleteOne: async function(user,id){
                axios.delete("http://192.168.31.198/admin-provider/"+ user +"/"+ id)
                    .then(response =>{
                        console.log("删除成功")
                    });
                await this.getList(user);
            },
            updateAdmin: async function(){
                axios.put("http://192.168.31.198/admin-provider/admin",{
                    id_admin: this.user.id_admin,
                    name: this.user.name,
                    password: this.user.password,
                    sex: this.user.sex
                }).then(response =>{
                    });
                // axios({
                //
                // })
            },
            getOne: async function(userType,id){//根据userType和ID进行查询
                // console.log("http://192.168.31.198/admin-provider/"+userType+"/"+id);
                // axios.get("http://192.168.31.198/admin-provider/"+userType +"/"+ id)
                //     .then(response =>{
                //     this.List = response.data;
                //     console.log(this.List = response.data);
                // });
                axios.get("http://192.168.31.198/admin-provider/"+userType+"/"+id,{
                }).then(response=>{
                    this.List = [];
                    this.List.push(response.data);
                });
            },
            disableStudent: async function(userType,id){//根据userType和ID,禁用用户

                axios.put("http://192.168.31.198/admin-provider/"+userType+"/"+id,{
                    age: "",
                    classesList: "",
                    create: ""
                }).then(response=>{
                    this.List = [];
                    this.List.push(response.data);
                });
            },
        }
    });

    async function Async() {// 异步请求响应数据的基本模版
        const form = document.querySelector('form');
        const formData = new FormData(form);
        let name = formData.get("name");//通过get来获取name值为"name"的值
        let age = formData.get("age");//通过get来获取name值为"age"的值
        const data = {name: name, age: age};
        const response = await fetch("http://localhost/post", {
                method: "POST", //POST DELETE PUT,GET(GET请求可不用写下面几项)
                headers: { //http请求的标头
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),//post请求的数据体
            }
        );//发送数据并获取响应
        const json = await response.json();//获取响应的json数据
        console.log(json);
    }


</script>
</body>
</html>